<template>
  <a-modal
    style="margin-top:-60px;"
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" >
            <span style="font-size: 16px;font-weight: bold;display: inline-block;margin-bottom: 30px;">基础信息</span>   
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'productName', validatorRules.productName]" placeholder="请输入剧本名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="作者" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'author', validatorRules.author]" placeholder="请输入作者"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="批次" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'itemPatch', validatorRules.itemPatch]" placeholder="请输入批次"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="总量" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number :min="1" disabled v-decorator="[ 'total', validatorRules.total]" placeholder="请输入总量" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="零售价格" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number :min="1" size="small" v-decorator="[ 'wholesalePrice', validatorRules.wholesalePrice]"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="正式发行时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择正式发行时间" v-decorator="[ 'publicTime', validatorRules.publicTime]" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">              
            <span style="font-size: 16px;font-weight: bold;display: inline-block;margin-bottom: 30px;">剧本详细信息</span>  
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本人数" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select defaultValue="" style="width:20%;" v-model="manSel">
                <a-select-option v-for="(vals,index) in listPerson" :key="vals.val" :value="index">{{vals.name}}</a-select-option>
              </a-select>
              <div style="display: inline-block;" v-if="manSel == 0">
                <a-input-number :min="1" placeholder="剧本人数" v-model="detailNum1" style="width: 50%;margin-left:10%;"/> 人
              </div>
              <div style="display: inline-block;width:76%;" v-if="manSel == 1">
                <div style="display: inline-block;margin-left:10%;width: 35%;">
                  男 <a-input-number :min="1" placeholder="剧本人数(男)" v-model="detailNum2" style="width: 60%;"/> 人
                </div>
                <div style="display: inline-block;margin-left:10%;width: 35%;">
                  女 <a-input-number :min="1" placeholder="剧本人数(女)" v-model="detailNum3" style="width: 60%;"/> 人
                </div>
              </div>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本简介" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-textarea v-decorator="[ 'detailInfo', validatorRules.detailInfo]" placeholder="请输入剧本简介" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="一句话简介" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-textarea v-decorator="[ 'productInfo', validatorRules.productInfo]" placeholder="请输入一句话简介" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本实景" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="radio" v-decorator="['playReality', validatorRules.playReality]" :trigger-change="true" dictCode="play_reality" placeholder="请选择剧本实景"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本形式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag type="checkbox" v-decorator="['playbillForm', validatorRules.playbillForm]" :trigger-change="true" dictCode="playbiil_form" placeholder="请选择剧本形式"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag type="checkbox" v-decorator="['playbillType', validatorRules.playbillType]" :trigger-change="true" dictCode="playbill_type" placeholder="请输入剧本类型"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="适合人群" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag type="checkbox" v-decorator="['belongtoCrowd', validatorRules.belongtoCrowd]" :trigger-change="true" dictCode="belongto_crowd" placeholder="请选择适合人群"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">            
            <a-form-item label="游戏时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number :min="0" v-decorator="[ 'playTime', validatorRules.playTime]" placeholder="请输入游戏时间"></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="道具支持" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-dict-select-tag type="radio" v-decorator="['propStatus', validatorRules.propStatus]" :trigger-change="true" dictCode="prop_status" placeholder="请选择道具支持"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本供应买断状态" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-dict-select-tag type="radio" v-decorator="['buyoutStatus', validatorRules.buyoutStatus]" :trigger-change="true" dictCode="buyout_status" placeholder="请选择买断状态"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="设置标签" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                    {{`${tag.slice(0, 20)}...`}}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :key="tag" closable :afterClose="() => handleClose(tag)">
                  {{tag}}
                </a-tag>
              </template>
              <a-input
                v-if="inputVisible && showTagLen"
                ref="input"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                v-model="inputValue"
                @change="handleInputChange"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
              />
              <a-tag v-if="!inputVisible && showTagLen" @click="showInput" style="background: #fff; borderStyle: dashed;">
                <a-icon type="plus" /> New Tag
              </a-tag>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <span style="font-size: 16px;font-weight: bold;display: inline-block;margin-bottom: 30px;">资料上传</span>  
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">            
            <a-form-item label="剧本实拍图" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-upload v-if="showUpload" v-decorator="['personPoster', validatorRules.personPoster]" :trigger-change="true"></j-upload>
              <span style="color:red;">建议图片比例为1:1</span>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="剧本海报" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <JUploadThree v-if="showUpload" v-decorator="['playbillPoster', validatorRules.playbillPoster]" :trigger-change="true"></JUploadThree>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="人物海报" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <JUploadTwo v-if="showUpload" v-decorator="['productImages', validatorRules.productImages]" :trigger-change="true"></JUploadTwo>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
            <a-form-item label="道具资料" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <JUploadFour v-if="showUpload" v-decorator="['propData', validatorRules.propData]" :trigger-change="true"></JUploadFour>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'  
  import JUpload from '@/components/jeecg/JUpload'
  import JUploadTwo from '@/components/jeecg/JUploadTwo'
  import JUploadThree from '@/components/jeecg/JUploadThree'
  import JUploadFour from '@/components/jeecg/JUploadFour'
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"

  export default {
    name: "BlockProductStandardsModal",
    components: { 
      JDate,
      JUpload,
      JUploadTwo,
      JUploadThree,
      JUploadFour,
      JMultiSelectTag,
    },
    // props:['bigclassId','smallclassId'],
    data () {
      return {
        newOldStatus:'',
        inputValue: '',
        manSel:0,
        showUpload:false,
        detailNum1:"",
        detailNum2:"",
        detailNum3:"",
        listPerson:[{
          name:"男女不限",
          val:"1"
        },{
          name:"男女有限制",
          val:"2"
        }],
        tags: [],
        inputVisible: false,
        showTagLen:true,
        form: this.$form.createForm(this),
        title:"操作",
        width:"100%",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          productName: {rules: [
            {required: true, message: '请输入剧本名称!'},
            {max:15, message: '最多15个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          itemPatch: {rules: [
            {required: true, message: '请输入剧本批次!'},
            {max:10, message: '最多10个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          total: {rules: [
            {required: true, message: '请输入总量!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          author: {rules: [
            {required: true, message: '请输入作者!'},
            {max:15, message: '最多15个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          wholesalePrice: {rules: [
            {required: true, message: '请输入零售价格!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          publicTime: {rules: [
            {required: true, message: '请输入正式发行时间!'},
          ]},
          playReality: {rules: [
            {required: true, message: '请选择剧本实景!'},
          ]},
          productInfo: {rules: [
            {required: true, message: '请输入一句话简介!'},
            {max:15, message: '最多15个字符!'},
          ]},
          detailInfo: {rules: [
            {required: true, message: '请输入剧本简介!'},
            {max:300, message: '最多300个字符!'},
          ]},
          belongtoCrowd: {rules: [
            {required: true, message: '请选择适合人群!'},
          ]},
          playTime: {rules: [
            {required: true, message: '请输入游戏时间!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          propStatus: {rules: [
            {required: true, message: '请选择道具支持!'},
          ]},
          playbillForm: {rules: [
            {required: true, message: '请选择剧本形式!'},
          ]},
          playbillType: {rules: [
            {required: true, message: '请选择剧本类型!'},
          ]},          
          buyoutStatus: {rules: [
            {required: true, message: '请选择剧本供应买断状态!'},
          ]},
          productImages: {rules: [
            // {required: true, message: '请选择剧本海报!'},
          ]},
          playbillPoster: {rules: [
            {required: true, message: '请选择剧本海报!'},
          ]},
          personPoster: {rules: [
            {required: true, message: '请选择剧本实拍图!'},
          ]},
          propData: {rules: [
            // {required: true, message: '请选择道具资料!'},
          ]},
          labelTags: {rules: [
            // {required: true, message: '请设置标签!'},
          ]},
          catalogId: {rules: [
            // {required: true, message: '请选择剧本大类'},
          ]},
          itemCode: {rules: [
          ]},
          playbillNumber: {rules: [
          ]},
        },
        validatorCopyRules: {
          productName: {rules: [
            {required: false, message: '请输入剧本名称!'},
            {max:15, message: '最多15个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          itemPatch: {rules: [
            {required: false, message: '请输入剧本批次!'},
            {max:10, message: '最多10个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          total: {rules: [
            {required: false, message: '请输入总量!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          author: {rules: [
            {required: false, message: '请输入作者!'},
            {max:15, message: '最多15个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          wholesalePrice: {rules: [
            {required: false, message: '请输入零售价格!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          publicTime: {rules: [
            {required: false, message: '请输入正式发行时间!'},
          ]},
          playReality: {rules: [
            {required: false, message: '请选择剧本实景!'},
          ]},
          productInfo: {rules: [
            {required: false, message: '请输入一句话简介!'},
            {max:15, message: '最多15个字符!'},
          ]},
          detailInfo: {rules: [
            {required: false, message: '请输入剧本简介!'},
            {max:300, message: '最多300个字符!'},
          ]},
          belongtoCrowd: {rules: [
            {required: false, message: '请选择适合人群!'},
          ]},
          playTime: {rules: [
            {required: false, message: '请输入游戏时间!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          propStatus: {rules: [
            {required: false, message: '请选择道具支持!'},
          ]},
          playbillForm: {rules: [
            {required: false, message: '请选择剧本形式!'},
          ]},
          playbillType: {rules: [
            {required: false, message: '请选择剧本类型!'},
          ]},          
          buyoutStatus: {rules: [
            {required: false, message: '请选择剧本供应买断状态!'},
          ]},
          productImages: {rules: [
            // {required: true, message: '请选择剧本海报!'},
          ]},
          playbillPoster: {rules: [
            {required: false, message: '请选择剧本海报!'},
          ]},
          personPoster: {rules: [
            {required: false, message: '请选择剧本实拍图!'},
          ]},
          propData: {rules: [
            // {required: true, message: '请选择道具资料!'},
          ]},
          labelTags: {rules: [
            // {required: true, message: '请设置标签!'},
          ]},
          catalogId: {rules: [
            // {required: true, message: '请选择剧本大类'},
          ]},
          itemCode: {rules: [
          ]},
          playbillNumber: {rules: [
          ]},
        },
        url: {
          add: "/block/blockProductStandards/add",
          edit: "/block/blockProductStandards/edit",
        }
      }
    },
    mounted () {
      this.showUpload = true;
    },
    watch:{
      tags(val){
        if(typeof val == 'object'){
          if(val.length>5){
            this.showTagLen = false;
          }else{
            this.showTagLen = true;
          }
        }else{
          this.tags.push(val);
        }
      }
    },
    methods: {
      handleClose(removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag);
        this.tags = tags;
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(function() {
          this.$refs.input.focus();
        });
      },

      handleInputChange(e) {
        if(!testRule(e.target.value)){
          that.$message.warning("不能包含空格！");
          return
        }
        this.inputValue = e.target.value;
      },

      handleInputConfirm() {
        const inputValue = this.inputValue;
        let tags = this.tags;
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue];
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: '',
        });
      },
      edit (record) {
        this.newOldStatus =record.newOldStatus;
        if(this.newOldStatus == 1){
          this.validatorRules = this.validatorCopyRules;
        }
        if(record.propStatus){
          record.propStatus = record.propStatus.toString();
        }
        if(record.labelTags && record.labelTags.indexOf(',')==-1){
          if(record.labelTags){
            this.tags=[record.labelTags];
          }
        }
        if(record.labelTags && record.labelTags.indexOf(',')!=-1){
          this.tags = record.labelTags.split(',');
        }
        if(record.playbillNumber && record.playbillNumber.indexOf(',') == -1){
          this.detailNum1 = record.playbillNumber;
        }
        if(record.playbillNumber && record.playbillNumber.indexOf(',') != -1){
          this.manSel = 1;
          this.detailNum2 = record.playbillNumber.split(',')[0];
          this.detailNum3 = record.playbillNumber.split(',')[1];
        }
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'productName','itemPatch','itemType','total','catalogId','labelTags','author','detailInfo','playReality','productInfo','wholesalePrice','itemCode','productImages','playbillPoster','personPoster','publicTime','playbillNumber','playbillForm','playbillType','belongtoCrowd','playTime','propStatus','propData','buyoutStatus'))
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        if(that.newOldStatus == 1){
          this.form.validateFields((err,values) => {
            // values.catalogId = "1216548439660412929";
            // values.itemType = "1216548480059949057";
            var arrList="";
            for(let i=0,len=this.tags.length;i<len;i++){
              if(i == 0){
                arrList = this.tags[0];
              }else{
                arrList+=","+this.tags[i];
              }
            }
            values.labelTags = arrList;
            if(this.manSel == 0){
              values.playbillNumber = this.detailNum1;
            }
            if(this.manSel == 1){
              values.playbillNumber =this.detailNum2+","+this.detailNum3;
            }
            that.confirmLoading = true;
            let httpurl = "/exhibition/exhibition_product_standards_new/edit";
            let method = 'put';
            values.biz_status = 0;
            let formData = Object.assign(this.model, values);
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          })
        }else{
          this.form.validateFields((err, values) => {
            if (!err) {
              if(this.tags.length<1){
                this.$message.warning("请设置标签！");
              }
              if(this.manSel == 0 && !this.detailNum1){
                this.$message.warning("请输入剧本人数！");
                return
              }
              if(this.manSel == 1 && !this.detailNum2 && !this.detailNum3){
                this.$message.warning("请输入剧本人数！");
                return
              }
              // if(this.form.getFieldValue('playbillForm').indexOf("1,2")!=-1 || this.form.getFieldValue('playbillForm').indexOf("1,3")!=-1 || this.form.getFieldValue('playbillForm').indexOf("2,3")!=-1
              //   || this.form.getFieldValue('playbillForm').indexOf("1,2,3")!=-1 || this.form.getFieldValue('playbillForm').indexOf("4,5,6")!=-1 || this.form.getFieldValue('playbillForm').indexOf("4,5")!=-1
              //   || this.form.getFieldValue('playbillForm').indexOf("4,6")!=-1 || this.form.getFieldValue('playbillForm').indexOf("5,6")!=-1 || this.form.getFieldValue('playbillForm').indexOf(",")==-1){
              //     this.$message.warning("剧本形式选择格式有误！");
              //     return
              // }
              values.catalogId = "1216548439660412929";
              values.itemType = "1216548480059949057";
              var arrList="";
              for(let i=0,len=this.tags.length;i<len;i++){
                if(i == 0){
                  arrList = this.tags[0];
                }else{
                  arrList+=","+this.tags[i];
                }
              }
              values.labelTags = arrList;
              if(this.manSel == 0){
                values.playbillNumber = this.detailNum1;
              }
              if(this.manSel == 1){
                values.playbillNumber =this.detailNum2+","+this.detailNum3;
              }
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              if(!this.model.id){
                httpurl+=this.url.add;
                method = 'post';
              }else{
                httpurl+=this.url.edit;
                 method = 'put';
              }
              values.biz_status = 0;
              let formData = Object.assign(this.model, values);
              httpAction(httpurl,formData,method).then((res)=>{
                if(res.success){
                  that.$message.success(res.message);
                  that.$emit('ok');
                }else{
                  that.$message.warning(res.message);
                }
              }).finally(() => {
                that.confirmLoading = false;
                that.close();
              })
            }
           
          })
        }
        // 触发表单验证
      },
      handleCancel () {
        this.close()
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'productName','itemPatch','itemType','total','catalogId','labelTags','author','detailInfo','playReality','productInfo','wholesalePrice','itemCode','productImages','playbillPoster','personPoster','publicTime','playbillNumber','playbillForm','playbillType','belongtoCrowd','playTime','propStatus','propData','buyoutStatus'))
      },

      
    }
  }
</script>